<comment>
# 组件注释
切片创建页面
</comment>
<template>
  <div class="sliceCreated">
    <!--todo 刷新 按钮根据页面状态判断 right-text 是否要为空串。以及各个板块是否要展示-->
    <van-nav-bar
      title="切片创建"
      left-text="返回"
      right-text="刷新"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <result-show v-if="showStatus !== 'doing'" :status="showStatus" :reason="failedReason"></result-show>
    <!--手机号展示-->
    <div v-if="showStatus === 'doing' || showStatus === 'success'">
      <van-form>
        <van-field v-model="formData.MDN" name="手机号" label="手机号" />

        <van-field v-model="formData.dnnName" name="DNN名称" label="DNN名称" />
      </van-form>

      <div class="time-auto-add">
        {{ timeShow }}
      </div>

      <!--loading-->
      <div v-show="showStatus !== 'success'" style="margin-top: 20px">
        <van-loading size="24px" vertical>加载中...</van-loading>
      </div>
    </div>
    </div>
</template>

<script>
import { timeAddOneSecond } from '@/utils/commonUtils.js'
import resultShow from './components/resultShow'
import {getSnssaiByMd} from "../../api/slice";
import {dealTime} from "../../utils/commonUtils";
export default {
  name: 'SliceCreated',
  components: {
    resultShow
  },
  data() {
    return {
      formData: {
        MDN: '',
        dnnName: ''
      },
      // 展示状态 doing. 开通中 success.开通成功 failed.开通失败 notExist.未开通
      showStatus: 'doing',
      timeShow: '00:00:00',
      autoAdd: null,
      failedReason: ''
    }
  },
  props: {},
  watch: {},
  methods: {
    onClickLeft() {
      this.$router.push({
        path: '/slice'
      })
    },
    onClickRight() {
      this.getInfos()
    },
    // 时间自动增加
    timeAutoAdd() {
      this.autoAdd = setInterval(() => {
        this.timeShow = timeAddOneSecond(this.timeShow)
      }, 1000)
    },
    getInfos() {
      clearInterval(this.autoAdd)
      const param = {
        userData: {
          MDN: this.formData.MDN
        }
      }
      getSnssaiByMd(param).then(res => {
        // 判断状态
        const { dnnName, failureCause, exist, duration, snssaiStatus } = res

        this.formData.dnnName = dnnName

        if (exist == 0) {
          this.showStatus = 'notExist'
        } else {
          if (snssaiStatus == 1) {
            this.showStatus = 'success'
          } else if (snssaiStatus == 0) {
            this.showStatus = 'failed'
            this.failedReason = failureCause
          }
        }

        // 将毫秒转换成HH:mm:ss

        this.timeShow = dealTime(Number(duration)).time
        // 开始计时
        this.timeAutoAdd()
      })
    },
    initPage() {
      const { MDN } = this.$route.query
      console.log('this.$route.query', this.$route.query)
      this.formData.MDN = MDN

      this.getInfos()
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.initPage()
  },
  destroyed() {}
}
</script>

<style lang='scss' scoped>
.sliceCreated {
  .time-auto-add {
    width: 100%;
    font-size: 50px;
    font-weight: bold;
    padding: 20px 0;
    text-align: center;
  }
}
</style>
